<template>
  <el-table
    :data="tableData.filter(data => !search || data.sname.toLowerCase().includes(search.toLowerCase()))"
    stripe
    style="width: 100%"
    height=780
    border>
    <el-table-column
      label="店铺名称"
      prop="sname">
    </el-table-column>
    <el-table-column
      label="店铺老板"
      prop="sowner">
    </el-table-column>
    <el-table-column
      label="店铺地址"
      prop="address">
    </el-table-column>

    <el-table-column prop="image" label="图片" width="120">
      <template slot-scope="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.image"
          fit="fill"></el-image>
      </template>
    </el-table-column>


    <el-table-column
      label="联系电话"
      prop="phone">
    </el-table-column>
    <el-table-column
      label="店铺描述"
      prop="sdesc">
    </el-table-column>

    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          @click="handleEdit(scope.row.sid)">修改
        </el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row.sid)">删除
        </el-button>

      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  import axios from "axios";

  export default {
    inject:['reload'],
    data() {
      return {
        // tableData: {
        //   fname: '',
        //   fdesc: '',
        //   price: '',
        //   image: '',
        // },
        tableData: [
          {
            address: '',
            image: '',
            phone: '',
            sdesc: '',
            sname: '',
            sowner: '',
            sid: ''
          }
        ],
        search: ''
      }
    },
    mounted() {
      this.selectAllShop();
    },

    methods: {
      selectAllShop() {
        axios.get("/api/selectAllShop").then(res => {
          this.tableData = res.data
        })
      },
      handleEdit: function (sid) {
        this.$router.push("/updateShop/" + sid);
      },

      handleDelete: function (sid) {

        if(confirm("你确认删除该条目吗？？？") == true){

          axios.delete("/api/deleteShop/" + sid).then(res => {

            if(res.data == "success"){
                this.$router.go(0)
            }else{
              alert("删除失败！！！");
            }
          });
        }else{
          this.$router.push("/ShopIndex/")
        }
      }
    }
  }
</script>
